<template>
  <div>
    <Row>
      <Card>
        <p slot="title">
          <Icon type="navicon-round"></Icon>
          菜色管理
        </p>
        <VmBtable type="edit" ref="VmBtable"
                  :columns="dataColumns"
                  :data="dataTable"
                  :searchparam="searchParam"
                  :exportBtn="false"
                  :importBtn="false"
                  :batchDelBtn="false"
                  :downTemplate="false"
                  v-on:searchFn="searchFn"
                  v-on:page-change="pageChangeFn"
                  v-on:addFn="addFn"
                  v-on:editFn="editFn"
                  v-on:deleteFn="deleteFn"
                  placeholder="名称关键字"
                  searchText="名称："
                  cleanText="刷新"
                  v-on:restFn="restFn">
          <div slot="search" class="db_inline">

          </div>
        </VmBtable>
      </Card>
    </Row>
    <Modal v-model="modal.visible" :title="modal.title" v-on:on-ok="subForm" :mask-closable="false" width="540"
           v-on:on-cancel="modal.visible=false">
      <Form ref="Form" :model="modal.form" :label-width="100" label-position="right" :rules="modal.rules">
        <FormItem label="菜色名称" prop="name">
          <Input v-model="modal.form.name" placeholder="菜色名称" style="width:63%"/>
        </FormItem>
        <FormItem label="菜色图片" prop="name">
        <Upload ref="upload" accept="image/*" delImgPath="food/image" :multiple="false" @get-file="fetFile"/>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modal.visible=false">取消</Button>
        <Button type="primary" @click="subForm" :loading="modal.loading">确定</Button>
      </div>
    </Modal>
    <Modal v-model="image.visible" title="菜色图片"  width="350">
      <div style="text-align: center">
        <img :src="image.url" style="width: 300px">
      </div>
    </Modal>
  </div>
</template>

<script>
  import API from "@/api/api";
  import VmBtable from "@/components/vm/vm-btable";
  import Upload from '@/components/views/upload/Upload'

  export default {
    components: {
      VmBtable,
      Upload
    },
    data() {
      return {
        image:{
          visible:false,
          url:''
        },
        searchParam: {
          current: 1,
          size: 20,
          total: 0,
          username: '',
        },
        dataColumns: [
          {
            title: '序号',
            type: 'index',
            align: 'center',
            width: 100
          },
          {
            title: '名称',
            key:'name',
            align: 'center',
          },
          {
            title: '图片',
            key:'image',
            align: 'center',
            render:(h,param)=>{
              let btn = h('Icon', {
                props: {
                  type: 'android-image',
                  size: '16'
                },
                style: {
                  color: 'blue',
                  cursor: 'pointer',
                  marginLeft: '5px'
                },
                on: {
                  click: () => {
                    this.showImage(param.row);
                  }
                }
              });
              return [btn]
            }
          },
        ],
        operate: [],
        dataTable: [],
        modal: {
          visible: false,
          title: '',
          isEdit: false,
          loading: false,
          form: {
            name: '',
            image:''
          },
          rules: {
            'name': [{
              required: true,
              trigger: 'blur',
              message: '必填项'
            }]
          }
        },
      };
    },
    methods: {
      showImage(data){
        Object.assign(this.image,{
          visible:true,
          url:data.imageList[0].url
        })
      },
      fetFile(oldList,newFile){
        this.modal.form.image=newFile.name;
      },
      addFn() {
        Object.assign(this.modal, {
          visible: true,
          isEdit: false,
          title: '添加',
          form: {}
        })
        this.$refs.upload.acceptImageList([]);
      },
      editFn(data) {
        Object.assign(this.modal, {
          visible: true,
          isEdit: true,
          title: '编辑',
          form: data
        })
        this.$refs.upload.acceptImageList([{id:data.image,key:data.image,fname:data.image,type:'image/jpeg'}]);
      },
      deleteFn(data) {
        API.deleteFood({id: data[0].id}).then(resp => {
          this.complete();
          this.queryFn();
        })
      },
      restFn() {
        this.searchParam.current = 1;
        this.searchParam.size = 20;
        this.searchParam.name = '';
        this.queryFn();
      },
      queryFn() {
        API.fetchFood(this.searchParam).then(
          res => {
            let data = res.data;
            this.dataTable = data.records;
            this.searchParam.total = data.total;
          },
          error => {
            this.$Message.info(error.msg);
          }
        );
      },
      complete() {
        Object.assign(this.modal, {
          visible: false,
          title: '',
          loading: false,
        });
        this.$refs.Form.resetFields();
      },
      subForm() {
        this.$refs.Form.validate(valid => {
          if (valid) {
            let data = Object.assign(this.modal.form);
            if (data.id) {
              API.updateFood(data).then(resp => {
                this.complete();
                this.queryFn();
              })
            } else {
              API.createFood(data).then(resp => {
                this.complete();
                this.queryFn();
              })
            }
          }
        })
      },
      cancelSub() {

      },
      pageChangeFn(current) {
        this.searchParam.current = current;
        this.queryFn();
      },
      searchFn(value) {
        this.searchParam.name = value;
        this.queryFn();
      },
    },
    created() {
    },
    mounted() {
      this.queryFn();
    }
  }
</script>

<style scoped>

</style>
